<template>
  <div class=''>
    <template v-for="(item,index) in driverInfoData">
    <div :key="index" class="main-container">
      <p class="title">出租车驾驶员基本情况表</p>
      <div class="sub-info">
        <span>单位: xxx有限公司</span><span class="date">日期:2020年12月20日</span>
      </div>
      <table
        border=0;
        cellpadding=6;
        cellspacing=0;
        align=center
      >
        <!--基本信息-->
        <tr align=center>
          <td rowspan="6">
            基<br />本<br />信<br />息
          </td>
          <td style="width: 8%;">姓名</td>
          <td style="width: 8%;"></td>
          <td style="width: 7%;">性别</td>
          <td style="width: 7%;"></td>
          <td style="width: 10%;">身份证号</td>
          <td style="width: 14%;"></td>
          <td style="width: 10%;">档案号</td>
          <td style="width: 14%;"></td>
          <td
            style="width: 19%;"
            rowspan="5"
          ></td>
        </tr>
        <tr align=center>
          <td>出生年月</td>
          <td colspan="3"></td>
          <td>家庭电话</td>
          <td></td>
          <td>移动电话</td>
          <td></td>
        </tr>
        <tr align=center>
          <td>籍贯</td>
          <td colspan="3"></td>
          <td>户口性质</td>
          <td></td>
          <td>文化程度</td>
          <td></td>
        </tr>
        <tr align=center>
          <td>驾驶车号</td>
          <td colspan="3"></td>
          <td>所属车队</td>
          <td></td>
          <td>车型</td>
          <td></td>
        </tr>
        <tr align=center>
          <td>上岗日期</td>
          <td colspan="3"></td>
          <td>离职日期</td>
          <td></td>
          <td>离职原因</td>
          <td></td>
        </tr>
        <tr align=center>
          <td>户籍地</td>
          <td colspan="4"></td>
          <td>现居住地</td>
          <td colspan="4"></td>
        </tr>
        <!--证件信息-->
        <tr align=center>
          <td rowspan="6">
            证<br />件<br />信<br />息
          </td>
          <td>身份证号</td>
          <td colspan="3"></td>
          <td>身份证有效期起</td>
          <td></td>
          <td>身份证到期日期</td>
          <td colspan="2"></td>
        </tr>
        <tr align=center>
          <td>驾驶证号</td>
          <td colspan="3"></td>
          <td>驾驶证有效期起</td>
          <td></td>
          <td>驾驶证到期日期</td>
          <td colspan="2"></td>
        </tr>
        <tr align=center>
          <td>驾驶证档案号</td>
          <td colspan="3"></td>
          <td>准驾车型</td>
          <td></td>
          <td>驾驶证初领日期</td>
          <td colspan="2"></td>
        </tr>
        <tr align=center>
          <td>从业资格证</td>
          <td colspan="3"></td>
          <td>资格证有效期起</td>
          <td></td>
          <td>资格证到期日期</td>
          <td colspan="2"></td>
        </tr>
        <tr align=center>
          <td>上岗证号</td>
          <td colspan="3"></td>
          <td>上岗证有效期起</td>
          <td></td>
          <td>上岗证到期日期</td>
          <td colspan="2"></td>
        </tr>
        <tr align=center>
          <td>居住证发证日期</td>
          <td colspan="3"></td>
          <td>居住证到期日期</td>
          <td></td>
          <td>居住证签发机关</td>
          <td colspan="2"></td>
        </tr>
        <!--主要社会关系-->
        <div v-if="item.relationList && item.relationList.length">
          <template v-for="(subItem,index) in item.relationList">
            <div :key="index">
              <tr align=center>
                <td :rowspan="item.relationList.length*2" v-if="index === 0">
                  主<br />要<br />社<br />会<br />关<br />系
                </td>
                <td>姓名（关系）</td>
                <td colspan="3"></td>
                <td>联系电话</td>
                <td>{{subItem.mobilePhone || ''}}</td>
                <td>身份证号</td>
                <td colspan="1"></td>
                <td colspan="1">紧急联络人：是</td>
              </tr>
              <tr align=center>
                <td>工作单位</td>
                <td colspan="4"></td>
                <td>现居住地</td>
                <td colspan="4"></td>
              </tr>
            </div>
          </template>
        </div>
        <div v-else>
          <tr align=center>
            <td rowspan="6" class="empty-padding">
              主<br />要<br />社<br />会<br />关<br />系
            </td>
            <td
              rowspan="6"
              colspan="10"
            ></td>
          </tr>
        </div>
      </table>
    </div>
    </template>
  </div>
</template>

<script>

export default {
  name: '',
  props: {
    driverInfoData: {
      type: Array
    }
  },
  data () {
    return {

    }
  },
  updated () {
    let dom = document.querySelector('#printId')
    this.$print(dom)
  }
}
</script>
<style lang='less' scoped>
.empty-padding {
  padding-top: 20mm;
  padding-bottom: 20mm;
}
table {
  width: 100%;
  border-collapse: collapse;
}

td {
  width: 160px;
  height: 30px;
  font-size: 12px;
  border: 1px solid #ccc;
}

.main-container {
  width: 210mm;
  height: 297mm;
  margin: 0 auto;
}

.title {
  text-align: center;
  line-height: 3;
}

.sub-info {
  display: flex;
}

.date {
  margin-left: auto;
}
</style>
